import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const TextNumberMeta: IPublicTypeComponentMetadata = {
  componentName: 'TextNumber',
  title: '文字数字',
  category: '基础组件',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TextNumber',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
  ],
  configure: {
    props: [
      // 内容属性
      {
        name: 'content',
        type: 'group',
        display: 'accordion',
        title: {
          label: '内容设置',
        },
        items: [
          {
            name: 'text',
            title: {
              label: '文字标签',
              tip: '显示的文字内容'
            },
            setter: 'StringSetter',
          },
          {
            name: 'number',
            title: {
              label: '数字',
              tip: '显示的数字内容'
            },
            setter: 'StringSetter',
          }
        ]
      },
      // 字体设置
      {
        name: 'font',
        type: 'group',
        display: 'accordion',
        title: {
          label: '字体设置',
        },
        items: [
          {
            name: 'textSize',
            title: {
              label: '文字大小',
              tip: '文字字体大小(px)'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'numberSize',
            title: {
              label: '数字大小',
              tip: '数字字体大小(px)'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'textWeight',
            title: {
              label: '文字粗细',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '正常', value: 'normal' },
                  { label: '粗体', value: 'bold' },
                  { label: '100', value: '100' },
                  { label: '200', value: '200' },
                  { label: '300', value: '300' },
                  { label: '400', value: '400' },
                  { label: '500', value: '500' },
                  { label: '600', value: '600' },
                  { label: '700', value: '700' },
                  { label: '800', value: '800' },
                  { label: '900', value: '900' }
                ]
              }
            },
          },
          {
            name: 'numberWeight',
            title: {
              label: '数字粗细',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '正常', value: 'normal' },
                  { label: '粗体', value: 'bold' },
                  { label: '100', value: '100' },
                  { label: '200', value: '200' },
                  { label: '300', value: '300' },
                  { label: '400', value: '400' },
                  { label: '500', value: '500' },
                  { label: '600', value: '600' },
                  { label: '700', value: '700' },
                  { label: '800', value: '800' },
                  { label: '900', value: '900' }
                ]
              }
            },
          }
        ]
      },
      // 颜色设置
      {
        name: 'color',
        type: 'group',
        display: 'accordion',
        title: {
          label: '颜色设置',
        },
        items: [
          {
            name: 'textColor',
            title: {
              label: '文字颜色',
              tip: '自定义文字颜色'
            },
            setter: 'ColorSetter',
          },
          {
            name: 'numberColor',
            title: {
              label: '数字颜色',
              tip: '自定义数字颜色'
            },
            setter: 'ColorSetter',
          },
          {
            name: 'theme',
            title: {
              label: '主题',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
          }
        ]
      },
      // 布局设置
      {
        name: 'layout',
        type: 'group',
        display: 'accordion',
        title: {
          label: '布局设置',
        },
        items: [
          {
            name: 'direction',
            title: {
              label: '布局方向',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '垂直', value: 'vertical' },
                  { label: '水平', value: 'horizontal' }
                ]
              }
            },
          },
          {
            name: 'align',
            title: {
              label: '对齐方式',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '左对齐', value: 'left' },
                  { label: '居中', value: 'center' },
                  { label: '右对齐', value: 'right' }
                ]
              }
            },
          },
          {
            name: 'spacing',
            title: {
              label: '间距',
              tip: '文字和数字之间的间距(px)'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'size',
            title: {
              label: '尺寸预设',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '小', value: 'small' },
                  { label: '中', value: 'medium' },
                  { label: '大', value: 'large' }
                ]
              }
            },
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '文字数字',
    screenshot: '',
    schema: {
      componentName: 'TextNumber',
      props: {
        text: '累计进展人数',
        number: '103561',
        textSize: 16,
        numberSize: 28,
        textColor: '#FFFFFF',
        numberColor: '#1AD7FF',
        textWeight: '400',
        numberWeight: 'bold',
        direction: 'vertical',
        align: 'left',
        spacing: 8,
        style: {
          fontFamily: 'SourceHanSansSC, DINAlternate'
        }
      }
    }
  }
];

export default {
  ...TextNumberMeta,
  snippets,
}; 